<template>
  <div id="receiveRecord">
    <h1 class="con-right-title">
      领取记录
    </h1>
    <!-- 上部搜索条件 -->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <!-- 操作按钮部分 -->
    <div class="table-conBtn">
      <el-button
        :loading="exLoading"
        type="warning"
        @click="exportFile()"
        v-permission="'wh:goodsActivity:receiveRecord:export'"
      >
        导出
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      style="width: 100%;"
      max-height="490"
      ref="table"
    >
      <el-table-column
        align="center"
        label="参与时间"
        prop="participateDate"
        min-width="150"
      >
      </el-table-column>
      <el-table-column
        align="center"
        label="大鹏号"
        prop="dpAccount"
        min-width="90"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.dpAccount">
            <span>
              {{ scope.row.dpAccount }}
            </span>
            <span
              class="dpAccountCopy"
              @click="copy(scope.row.dpAccount)"
              v-copy="scope.row.dpAccount"
            >
              复制
            </span>
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column label="已赠商品" prop="version" min-width="90">
        <template slot-scope="scope">
          <span v-for="(item, index) of scope.row.courseNames" :key="index"
            >{{ item.name }};<br />
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="赠课时间" min-width="160">
        <template slot-scope="scope">
          <div v-if="scope.row.createdDate">
            {{ scope.row.createdDate | timeToTime() }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="开课时间"
        prop="openCourseDate"
        min-width="160"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.createdDate">
            {{ scope.row.createdDate | timeToTime() }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="关课时间" min-width="160">
        <template slot-scope="scope">
          <div v-if="scope.row.closeCourseDate">
            {{ scope.row.closeCourseDate | timeToTime() }}
          </div>
          <div v-else>-</div>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
  </div>
</template>

<script>
import { getRecordsList } from '@/api/goodsActivityManagement' //接口
import topSearch from '@component/goodsActivityManagement/receiveRecord/topSearch' // 上部搜索条件
import { saveScrollMixins } from '@/mixins/saveScroll'
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { copy } from 'v-copy'
export default {
  name: 'list',
  mixins: [saveScrollMixins],
  directives: {
    copy
  },
  components: {
    topSearch
  },
  computed: {
    exLoading() {
      return this.$store.state.exportLoading['receiveRecord'] || false
    }
  },
  data() {
    return {
      course_types: '',
      fileName: '',
      loading: false,
      total: 0, // 搜索条件
      formInline: {
        dpAccount: '', //大鹏号
        endDate: '', //结束时间
        startDate: '' //开始时间
      },
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 表格数据
      tableData: []
    }
  },
  activated() {
    this.toTableScrollHeight()
    this.searchList()
    this.load_export = false
  },
  async mounted() {
    this.fileName = this.$route.query.name
    this.searchList()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    // 复制大鹏号
    copy(val) {
      if (val) {
        this.$message.success('已复制！')
      } else {
        this.$message.warning('无数据！')
      }
    },
    exportFile() {
      this.$store.commit('setExportLoading', {
        key: 'receiveRecord',
        value: true
      })
      let id = this.$route.query.id
      let obj = { ...this.formInline }
      this.downFile(
        'get',
        `/giving-courses/${id}/records/export`,
        obj,
        `${this.fileName}领取数据`,
        (err) => {
          this.$message({
            message: '导出失败，请重新导出',
            type: 'warning'
          })
        },
        'receiveRecord'
      )
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      getRecordsList(
        this.$route.query.id,
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 刷新列表 */
    refresh() {
      this.toSearch()
    }
  }
}
</script>

<style lang="less">
// 修改时间端小图标样式问题
#app .right-con .search-box .el-input .el-input__inner {
  padding: 0 25px 0 30px;
}
.dpAccountCopy {
  cursor: pointer;
  color: #416fe2;
}
</style>
